<template>
    <div>
        <!-- 面包屑导航 -->
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>

  
  <!-- 卡片视图区域 -->
  <el-card>
      <el-row>
          <el-col>
              <el-button @click="showAddCateDialog" type="primary"> 
                  添加分类
              </el-button>
          </el-col>
      </el-row>
      <!-- 表格 -->
      <tree-table class="treeTable" :data="catelist" :columns="columns"  :selection="false"
      :expand-type="false"
      show-index index-text="#" border :show-row-hover="false">
      <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
            <i v-if="scope.row.cat_deleted === false" class="el-icon-success" style="color:lightgreen"></i>
             <i v-else class="el-icon-error" style="color:red"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
            <el-tag size="mini" type="success" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag v-else-if="scope.row.cat_level === 1"  size="mini"  type="warning">二级</el-tag>
            <el-tag v-else size="mini" >三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
            <el-button @click="showEditForm(scope.row.cat_id)" size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button @click="deleteitem(scope.row.cat_id)" size="mini"  type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
  <!-- 添加分类的对话框 -->
  <el-dialog
  @close="addCateDialogClosed"
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="600px">
  <!-- 添加分类表单 -->
  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="分类名称:" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
    <el-form-item label="父级名称:">
    <el-cascader 
    
    clearable
    change-on-select
    expand-trigger="hover"
    v-model="selectedKeys"
    :options="parentCateList"
    :props="cascaderProps"
    @change="parentCateChanged"></el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
<!-- 编辑的对话框 -->
<el-dialog
@close="editClose"
  title="编辑分类"
  :visible.sync="editDialogVisible"
  width="50%">
  <el-form :model="editlist" :rules="addCateFormRules" ref="editlistRef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="分类名称:" prop="cat_name">
    <el-input v-model="editlist.cat_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editForm">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            //添加分类的表单数据对象
            addCateForm:{
                //将要添加的分类名称
                cat_name:'',
                //父分类id
                cat_pid:0,
                //当前分类等级
                cat_level:0
            },
            //编辑的表单数据对象
            editlist:[],
            //添加分类的验证规则
            addCateFormRules:{
                cat_name:[{
                    required:true,message:'请输入分类名称',trigger:'blur'},
                    {
                        min:3,
                        max:10,
                        message:'分类名称长度在3~10个字符之间',
                        trigger:'blur'
                    
                }]
            },
            //查询条件
            querInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            //选中的父级分类的id数组
            selectedKeys:[],
            //指定级联选择器的配置对象
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            //父级分类数据列表
            parentCateList:[],
            //商品分类的列表
            catelist:[],
            // 总数据条数
            total:0,
            //控制分类对话框的显示
            addCateDialogVisible : false,
            editDialogVisible:false,
            //为table指定列的定义
            columns:[{
                label:'分类名称',
                prop:'cat_name'
            },
            {
                //表示将当前列定义为模板列
                label:'是否有效',
                //表示当前这一列使用模板名称
                type:'template',
                template:'isok'
            },
             {
                //表示将当前列定义为模板列
                label:'排序',
                //表示当前这一列使用模板名称
                type:'template',
                template:'order'
            },
             {
                //表示将当前列定义为模板列
                label:'操作',
                //表示当前这一列使用模板名称
                type:'template',
                template:'opt'
            }],
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        //获取商品分类数据
       async getCateList(){
            const {data:res} = await this.$http.get('categories',{params:this.querInfo})
             if(res.meta.status!==200){
        return this.$message.error('获取商品分类失败!')
      }
        this.catelist = res.data.result
        this.total = res.data.total
        },
        //监听页面大小变化
        handleSizeChange(newSize){
            this.querInfo.pagesize = newSize
            this.getCateList()
        },
        //监听页码变化
        handleCurrentChange(newPage){
            this.querInfo.pagenum = newPage
            this.getCateList()
        },
        //点击按钮展示分类对话框
        showAddCateDialog(){
            //获取父级分类数据列表
            this.getParentCateList()
            this.addCateDialogVisible = true
        },
        //获取父级分类的列表
       async getParentCateList(){
            const {data:res} = await this.$http.get('categories',{params:{type:2} })
             if(res.meta.status!==200){
        return this.$message.error('获取父级分类数据失败!')
        }
        this.parentCateList = res.data
    },
    //选择项发生变化触发这个函数
        parentCateChanged(){
                //如果数组中长度大于零则证明选中父级，反之就是没有选中任何父级分类
             if(this.selectedKeys.length > 0){{
                  this.addCateForm.cat_pid =  this.selectedKeys[this.selectedKeys.length-1]
                }
                this.addCateForm.cat_level = this.selectedKeys.length
                return
            }else {
                //父级分类的id
                this.addCateForm.cat_pid = 0
                //为当前分类的等级赋值
                this.addCateForm.cat_level = 0
            }
    },
    //点击按钮，添加分类
    addCate(){
        this.$refs.addCateFormRef.validate( async valid=>{
          if(!valid)return

         const {data:res} = await this.$http.post('categories',this.addCateForm)
         if(res.meta.status !== 201){
           this.$message.error('添加分类失败!')
         }
         this.$message.success('添加分类成功!')
         this.addCateDialogVisible = false
         this.getCateList()
        })
    },
    //监听对话框关闭事件
    addCateDialogClosed(){
        this.$refs.addCateFormRef.resetFields()
        this.selectedKeys = []
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
    },
    //编辑事件
    async showEditForm(id){
         const {data:res} = await this.$http.get('categories/'+id)
            if(res.meta.status !== 200){
          return this.$message.error('查询用户信息失败！')
        }
        this.editlist = res.data
        this.editDialogVisible = true
    },
    //编辑框关闭事件
    editClose(){
        this.$refs.editlistRef.resetFields()
    },
    //编辑名称
    editForm(){
        this.$refs.editlistRef.validate( async valid=>{
          if(!valid)return
         const {data:res} = await this.$http.put('categories/'+this.editlist.cat_id,{
             cat_name:this.editlist.cat_name
         })
         if(res.meta.status !== 200){
           this.$message.error('编辑失败!')
         }
         this.$message.success('编辑成功!')
         this.editDialogVisible = false
         this.getCateList()
        })
    },
    //删除功能
   async deleteitem(id){
       const confirmResult =  await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        //用户确定删除，返回值为confirm，取消删除则为cancel
        if(confirmResult !== 'confirm'){
          return this.$message.info('已取消删除')
    }
    const {data:res} = await this.$http.delete('categories/'+id)
      if(res.meta.status!==200){
        return this.$message.error('删除分类失败!')
      }
      this.$message.success('删除分类成功!')
      this.getCateList()
}
    }
}
</script>

<style>
.treeTable{
    margin-top: 15px;
}
.el-cascader {
  width: 100%;
  
}
.el-cascader-menu{
  height: 200px;
}
</style>